<template>
  <el-row class="app_box" type="flex" justify="center" align="middle">
    <el-col :span="1">
      <div class="app_box_arrow" @click="listArrowLeft">
        <i class="el-icon-arrow-left app_box_i_arrow"></i>
      </div>
    </el-col>
    <el-col :span="22">
      <SystemApplication v-for="app in list.slice((currentPage-1) * pageSize, currentPage * pageSize)" :key="app.id" :comp="app"></SystemApplication>
    </el-col>
    <el-col :span="1">
      <div class="app_box_arrow" style="float: right" @click="listArrowRight">
        <i class="el-icon-arrow-right app_box_i_arrow"></i>
      </div>
    </el-col>
  </el-row>
</template>

<script>
import SystemApplication from "@/components/SystemApplication";
export default {
name: "SystemApplicationBox",
  components: {SystemApplication},
  data(){
    return{
      list: this.$store.getters.appList,
      pageList: [],
      currentPage: 1, // 当前页数
      pageSize: 36, // 每页数量
      totalPage: 0, // 总页数
    }
  },

  created() {
    this.initList()
  },

  methods: {
    // 给数组分组
    initList(){
      var list = this.list;
      var pageSize = this.pageSize;
      // for (let i = 0; i < list.length;) {
      //   var slice = list.slice(i, i+=5);
      //   this.pageList.push(slice)
      // }
      var length = list.length;
      var totalPage = length / pageSize
      if (length % pageSize !== 0){
        totalPage ++
      }
      this.totalPage = totalPage.toFixed(0)
    },

    listArrowLeft(){
      var currentPage = this.currentPage;
      console.log(currentPage)
      if (currentPage - 1 <= 0){
        this.currentPage = this.totalPage
      }else {
        this.currentPage--
      }
    },

    listArrowRight(){
      var totalPage = this.totalPage;
      var currentPage = this.currentPage;
      if (currentPage + 1 > totalPage){
        this.currentPage = 1
      }else {
        this.currentPage++
      }
    }
  }
}
</script>

<style scoped>
.app_box{
  /*border: 1px solid black;*/
  /*padding: 1%;*/
  /*border-radius: 1%;*/
  /*background: rgba(0,0,0,0.2);*/
}

.app_box_arrow{
  width: 50%;
  border-radius: .5rem;
  /*background: rgba(0,0,0,0.3);*/
  cursor: pointer;
}

.app_box_i_arrow{
  width: 100%;
  height: 100%;
  color: white;
  font-size: 2rem;
  font-weight: bolder;
}
</style>